import React, { Component } from 'react'
import AmpStoriesIcon from '@material-ui/icons/AmpStories';
import "./Practice.less"
import Wenda from "@/components/Practice/Wenda"
import GoBack from "@/components/GoBack/GoBack"
import { GetTimuListApi } from '@/request/api'
import Danxuan from "@/components/Practice/Danxuan"

// 手指触摸点
let startX = -1;
// 手指松开点
let endX = -1;
// 当前li的索引值
let liIndex = 0;

export default class Practice extends Component {
    state = {
        ulLeft: 0,
        testArr: [],
    }
    async componentDidMount() {
        // console.log(this.props.match.params);
        let { actionCode, questionType, testNum, testType } = this.props.match.params
        let res = await GetTimuListApi({
            actionCode, questionType, testNum, testType
        })
        console.log("题目列表", res);
        this.setState({
            testArr: res.data
        })
    }

    render() {
        return (
            <div className="Practice">
                <div className="top">
                    <AmpStoriesIcon />
                    <div className="top_index">
                        <b>{Math.abs(liIndex) + 1}</b>
                        <span>/</span>
                        <span>{this.state.testArr.length}</span>
                    </div>
                </div>
                <ul
                    className="timu"
                    style={{
                        width: this.state.testArr.length * 100 + "%",
                        left: this.state.ulLeft,
                    }}
                    onTouchStart={this.handleTouchStart.bind(this)}
                    onTouchMove={this.handleTouchMove.bind(this)}
                    onTouchEnd={this.handleTouchEnd.bind(this)}
                >
                    {this.state.testArr.map((item, index) =>
                        <li key={index}>
                            <Wenda test={item} actionCode={this.props.match.params.actionCode} />
                            <Danxuan test={item} actionCode={this.props.match.params.actionCode} />
                        </li>
                    )}
                </ul>
                <GoBack />
            </div>
        )
    }
    // 手指触摸到屏幕
    handleTouchStart(e) {
        startX = e.touches[0].clientX;
    }
    // 手指滑动
    handleTouchMove(e) {
        endX = e.touches[0].clientX;
    }
    handleTouchEnd(e) {
        let _this = this;
        // 获取滑动范围
        if (startX > -1 && endX > -1) {
            let distance = Math.abs(startX - endX);
            if (distance > 30) {
                // 两个手指位置距离相差30px，即视为要滑动
                if (startX > endX) {
                    liIndex--;
                    // index是不能超过数组长度的
                    if (Math.abs(liIndex) >= _this.state.testArr.length - 1) {
                        liIndex = -_this.state.testArr.length + 1;
                    }
                } else {
                    liIndex++;
                    if (liIndex >= 0) {
                        liIndex = 0;
                    }
                }
                this.setState({ ulLeft: 100 * liIndex + '%' }, () => {
                    startX = -1;
                    endX = -1;
                });
            } else {
                return;
            }
        }
    }
}